Tailwind CSSで動的に値を変更する
JIT modeが有効になっていると、動的にclasssを変化させた時に更新されないなmrsekut.icon
特にw-[${hoge}px]のように[]も併用したときとかも
仕組み的に動かないのは当然という気はするが、回避策はあるんだろうか
こうじゃなくて
code:ts
<div className={mt-[${size === 'lg' ? '22px' : '17px' }]}></div>
こうかく
code:ts
<div className={ size === 'lg' ? 'mt-22px' : 'mt-17px' }></div> いやいま知りたいのはこれではないな
本当に任意の値を指定したい場合はtailwindを使わずにstyle={{..}}の方に書かないといけない
tailwind.config.jsのcontentで指定したpathのファイル内に書いたTailwind CSSのutility classの文字列が、全てTailwindの対象になる、という感じ それを正規表現だけでチェックしている
だから、絶対にclassName="ここ"に書かないといけない、のような制約はない
こんな感じで書いたとしてもちゃんと動作する
code:js
hoge.addEventListener('click', () => {
let cl = document.getElementById('nav').classList;
cl.toggle('hidden');
cl.toggle('block');
})
だから、正規表現にマッチさせるために、条件式にはbg-red-400のような完全な文字列をファイル内においておかないといけない